import{d as t,M as l,A as a,h as r}from"./Anchors-CRD96j4l.js";import{D as c,a as i}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const s={path:"/form/cascader",name:"cascader",title:"Cascader 级联选择"};function d(n){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...n.components};return l(r,{children:[l("div",{class:"sys-ctx-main-left",children:[l(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),s.title]}),l(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(c,{columns:2}),t(i,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Cascader } from "cui-solid"

export default () => {
    const data = [
        {
            value: 'beijing', title: '北京',
            children: [
                {value: 'gugong', title: '故宫'},
                {value: 'tiantan', title: '天坛'},
                {value: 'wangfujing', title: '王府井'},
            ]
        },
        {
            value: 'jiangsu',
            title: '江苏',
            children: [
                {
                    value: 'nanjing',
                    title: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            title: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    title: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            title: '拙政园',
                            disabled: true
                        },
                        {
                            value: 'shizilin',
                            title: '狮子林',
                        }
                    ]
                }
            ],
        }
    ]

    return <Cascader data={data}/>
}`,scopes:void 0,children:t(e.p,{children:"基础用法"})}),t(i,{id:"disabled",title:"禁用",src:"2disabled.demo.tsx",code:`import { Cascader } from "cui-solid"

export default () => {
    const data = [
        {
            value: 'beijing', title: '北京',
            children: [
                {value: 'gugong', title: '故宫'},
                {value: 'tiantan', title: '天坛'},
                {value: 'wangfujing', title: '王府井'},
            ]
        },
        {
            value: 'jiangsu',
            title: '江苏',
            children: [
                {
                    value: 'nanjing',
                    title: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            title: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    title: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            title: '拙政园',
                            disabled: true
                        },
                        {
                            value: 'shizilin',
                            title: '狮子林',
                        }
                    ]
                }
            ],
        }
    ]

    return <Cascader data={data} disabled/>
}`,scopes:void 0,children:l(e.p,{children:["使用 ",t(e.code,{className:"sp-inline-code",children:"disabled"})," 禁用"]})}),t(i,{id:"size",title:"尺寸",src:"3size.demo.tsx",code:`import { Cascader, Space } from "cui-solid"

export default () => {
    const data = [
        {
            value: 'beijing', title: '北京',
            children: [
                {value: 'gugong', title: '故宫'},
                {value: 'tiantan', title: '天坛'},
                {value: 'wangfujing', title: '王府井'},
            ]
        },
        {
            value: 'jiangsu',
            title: '江苏',
            children: [
                {
                    value: 'nanjing',
                    title: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            title: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    title: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            title: '拙政园',
                            disabled: true
                        },
                        {
                            value: 'shizilin',
                            title: '狮子林',
                        }
                    ]
                }
            ],
        }
    ]

    return <Space>
        <Cascader data={data} size="small" value={['jiangsu','suzhou','shizilin']} />
        <Cascader data={data} value={['jiangsu','suzhou','shizilin']} />
        <Cascader data={data} size="large" value={['jiangsu','suzhou','shizilin']} />
    </Space>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"size"})," 支持 ",t(e.code,{className:"sp-inline-code",children:"small"})," 和 ",t(e.code,{className:"sp-inline-code",children:"large"})]})}),t(i,{id:"sep",title:"自定义分隔符",src:"4sep.demo.tsx",code:`import { Cascader, Space } from "cui-solid"

export default () => {
    const data = [
        {
            value: 'beijing', title: '北京',
            children: [
                {value: 'gugong', title: '故宫'},
                {value: 'tiantan', title: '天坛'},
                {value: 'wangfujing', title: '王府井'},
            ]
        },
        {
            value: 'jiangsu',
            title: '江苏',
            children: [
                {
                    value: 'nanjing',
                    title: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            title: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    title: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            title: '拙政园',
                            disabled: true
                        },
                        {
                            value: 'shizilin',
                            title: '狮子林',
                        }
                    ]
                }
            ],
        }
    ]

    return <Cascader data={data} seperator=">"/>
}`,scopes:void 0,children:l(e.p,{children:["使用 ",t(e.code,{className:"sp-inline-code",children:"seperator"})," 可以自定义分隔符"]})}),t(i,{id:"trigger",title:"触发事件",src:"5trigger.demo.tsx",code:`import { Cascader, Space } from "cui-solid"

export default () => {
    const data = [
        {
            value: 'beijing', title: '北京',
            children: [
                {value: 'gugong', title: '故宫'},
                {value: 'tiantan', title: '天坛'},
                {value: 'wangfujing', title: '王府井'},
            ]
        },
        {
            value: 'jiangsu',
            title: '江苏',
            children: [
                {
                    value: 'nanjing',
                    title: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            title: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    title: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            title: '拙政园',
                            disabled: true
                        },
                        {
                            value: 'shizilin',
                            title: '狮子林',
                        }
                    ]
                }
            ],
        }
    ]

    return <Cascader data={data} trigger="hover" value={['jiangsu','suzhou','shizilin']} />
}`,scopes:void 0,children:l(e.p,{children:["使用 ",t(e.code,{className:"sp-inline-code",children:"trigger"})," 修改展开的触发条件， 支持 ",t(e.code,{className:"sp-inline-code",children:"hover"})," 和 ",t(e.code,{className:"sp-inline-code",children:"click"})]})}),t(i,{id:"change",title:"选择及改变",src:"6change.demo.tsx",code:`import { Cascader, Space } from "cui-solid"

export default () => {
    const data = [
        {
            value: 'beijing', title: '北京',
            children: [
                {value: 'gugong', title: '故宫'},
                {value: 'tiantan', title: '天坛'},
                {value: 'wangfujing', title: '王府井'},
            ]
        },
        {
            value: 'jiangsu',
            title: '江苏',
            children: [
                {
                    value: 'nanjing',
                    title: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            title: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    title: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            title: '拙政园',
                            disabled: true
                        },
                        {
                            value: 'shizilin',
                            title: '狮子林',
                        }
                    ]
                }
            ],
        }
    ]

    return <Cascader data={data} changeOnSelect value={['jiangsu','suzhou','shizilin']} />
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"changeOnSelect"})," 选择选项及改变值"]})}),t(i,{id:"control",title:"可控",src:"7control.demo.tsx",code:`import { Button, Cascader, Space } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const [value, setValue]: any[] = createSignal();

    const data = [
        {
            value: 'beijing', title: '北京',
            children: [
                {value: 'gugong', title: '故宫'},
                {value: 'tiantan', title: '天坛'},
                {value: 'wangfujing', title: '王府井'},
            ]
        },
        {
            value: 'jiangsu',
            title: '江苏',
            children: [
                {
                    value: 'nanjing',
                    title: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            title: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    title: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            title: '拙政园',
                            disabled: true
                        },
                        {
                            value: 'shizilin',
                            title: '狮子林',
                        }
                    ]
                }
            ],
        }
    ]

    return <Space>
        <Cascader data={data} value={[value, setValue]} />
        <Button type="primary" onClick={() => {
            setValue(['jiangsu','suzhou','shizilin'])
        }}>
            设置值
        </Button>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"value"})," 可控属性"]})}),t(i,{id:"loading",title:"动态加载",src:"8loading.demo.tsx",code:`import { Button, Cascader, Space } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const [value, setValue]: any[] = createSignal();

    const data = [
        {
            value: 'beijing', title: '北京',
            children: [
                {value: 'gugong', title: '故宫'},
                {value: 'tiantan', title: '天坛'},
                {value: 'wangfujing', title: '王府井'},
            ]
        },
        {
            value: 'jiangsu',
            title: '江苏',
            children: [
                {
                    value: 'nanjing',
                    title: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            title: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    title: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            title: '拙政园',
                            disabled: true
                        },
                        {
                            value: 'shizilin',
                            title: '狮子林',
                        }
                    ]
                }
            ],
        }
    ]

    return <Space>
        <Cascader data={data} loadData={(item: any) => {
            return new Promise((resolve) => {
                setTimeout(() => {
                    if (item.value === 'beijing') {
                        resolve([
                            {value: 'gugong', title: '故宫'},
                            {value: 'tiantan', title: '天坛'},
                            {value: 'wangfujing', title: '王府井'},
                        ]);
                    }
                    if (item.value === 'jiangsu') {
                        resolve([
                            {
                                value: 'nanjing',
                                title: '南京',
                            },
                            {
                                value: 'suzhou',
                                title: '苏州',
                            }
                        ]);
                    }
                }, 1000);
            })
        }}/>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["数据属性存在 ",t(e.code,{className:"sp-inline-code",children:"loading"})," 可配合 ",t(e.code,{className:"sp-inline-code",children:"loadData"})," 方法进行动态加载子元素"]})}),l(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"name"}),t(e.td,{style:{textAlign:"left"},children:"name属性"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"disabled"}),t(e.td,{style:{textAlign:"left"},children:"禁用"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"size"}),t(e.td,{style:{textAlign:"left"},children:"尺寸"}),t(e.td,{style:{textAlign:"left"},children:"small | large"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"clearable"}),t(e.td,{style:{textAlign:"left"},children:"可清空"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"align"}),t(e.td,{style:{textAlign:"left"},children:"下拉位置"}),t(e.td,{style:{textAlign:"left"},children:"bottomLeft | bottomRight"}),t(e.td,{style:{textAlign:"left"},children:"bottomRight"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"prepend"}),t(e.td,{style:{textAlign:"left"},children:"前缀"}),t(e.td,{style:{textAlign:"left"},children:"JSXElement"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"value"}),t(e.td,{style:{textAlign:"left"},children:"值，可控属性"}),t(e.td,{style:{textAlign:"left"},children:"Signal"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"placeholder"}),t(e.td,{style:{textAlign:"left"},children:"placeholder"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"seperator"}),t(e.td,{style:{textAlign:"left"},children:"分隔符"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"/"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"transfer"}),t(e.td,{style:{textAlign:"left"},children:"下拉内容使用Portal渲染"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"revers"}),t(e.td,{style:{textAlign:"left"},children:"是否需要翻转"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"},children:"true"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"data"}),t(e.td,{style:{textAlign:"left"},children:"传入的数据体"}),t(e.td,{style:{textAlign:"left"},children:"Array"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"trigger"}),t(e.td,{style:{textAlign:"left"},children:"展开触发条件"}),t(e.td,{style:{textAlign:"left"},children:"click | hover"}),t(e.td,{style:{textAlign:"left"},children:"click"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"changeOnSelect"}),t(e.td,{style:{textAlign:"left"},children:"点击选项及改变值"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"loadData"}),t(e.td,{style:{textAlign:"left"},children:"动态加载方法"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onChange"}),t(e.td,{style:{textAlign:"left"},children:"值改变事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onSelect"}),t(e.td,{style:{textAlign:"left"},children:"选项选择事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),l(e.h2,{id:"data_props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#data_props",children:t(e.span,{className:"icon icon-link"})}),"数据属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"value"}),t(e.td,{style:{textAlign:"left"},children:"选项值"}),t(e.td,{style:{textAlign:"left"},children:"string | number"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"title"}),t(e.td,{style:{textAlign:"left"},children:"选项显示信息"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"children"}),t(e.td,{style:{textAlign:"left"},children:"子元素"}),t(e.td,{style:{textAlign:"left"},children:"Array"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"disabled"}),t(e.td,{style:{textAlign:"left"},children:"选项禁用"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"},children:"-"})]})]})]}),l(e.h2,{id:"events",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#events",children:t(e.span,{className:"icon icon-link"})}),"事件 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"事件名称"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"返回值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onChange"})}),t(e.td,{style:{textAlign:"left"},children:"值改变事件"}),t(e.td,{style:{textAlign:"left"},children:"value: string[]"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onSelect"})}),t(e.td,{style:{textAlign:"left"},children:"选项选择事件"}),t(e.td,{style:{textAlign:"left"},children:"item: Object"})]})]})]})]}),`
`,`
`,`
`,t(a,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"disabled",title:"禁用",src:"2disabled.demo.tsx"},{id:"size",title:"尺寸",src:"3size.demo.tsx"},{id:"sep",title:"自定义分隔符",src:"4sep.demo.tsx"},{id:"trigger",title:"触发事件",src:"5trigger.demo.tsx"},{id:"change",title:"选择及改变",src:"6change.demo.tsx"},{id:"control",title:"可控",src:"7control.demo.tsx"},{id:"loading",title:"动态加载",src:"8loading.demo.tsx"},{id:"props",depth:2,title:"属性"},{id:"data_props",depth:2,title:"数据属性"},{id:"events",depth:2,title:"事件"}]})]})}function g(n={}){const{wrapper:e}=n.components||{};return e?t(e,{...n,children:t(d,{...n})}):d(n)}export{g as default,s as frontmatter};
